<template>
	<view>
		<view style="padding-bottom: 120rpx;">
			<uni-section title="行驶证信息" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="行驶证有效期" labelWidth="100" name="drivingLicenseValidityDate">
							<view @click="showTimeAlert = true">
								<u--input v-model="fromData.drivingLicenseValidityDate" placeholder="请选择行驶证有效期" disabled
									disabledColor="#fff" suffixIcon="arrow-right"></u--input>
							</view>
						</uni-forms-item>
						<uni-forms-item label="行驶证照片" labelWidth="150" labelPosition="top">
							<view class="flex-row-center-sb">
								<view class="flex-colum-center">
									<sr-upload :isCustom="true" maxCount="1" @uploadResult="uploadResult1"></sr-upload>
									<text style="color: #666;font-size: 22rpx;margin-top: 20rpx;">上传正面</text>
								</view>
								<view class="flex-colum-center">
									<sr-upload :isCustom="true" maxCount="1" @uploadResult="uploadResult2"></sr-upload>
									<text style="color: #666;font-size: 22rpx;margin-top: 20rpx;">上传反面</text>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-section>

			<uni-section title="车辆信息" type="line">
				<view class="formContainer">
					<uni-forms ref="form" :modelValue="fromData" :rules="rules">
						<uni-forms-item label="品牌车型" name="carInfo" required>
							<view @click="editCar(1)">
								<u--input v-model="fromData.carInfo" placeholder="请选择品牌车型" disabled disabledColor="#fff"
									suffixIcon="arrow-right"></u--input>
							</view>
						</uni-forms-item>

						<uni-forms-item label="车牌号码" name="carNo" required>
							<view @click="showCarKeyboard = true">
								<u--input v-model="fromData.carNo" placeholder="请输入车牌号" disabled disabledColor="#ffffff"
									maxlength="7">
								</u--input>
							</view>
						</uni-forms-item>
						<uni-forms-item label="车架号" name="vinNo" required>
							<u--input v-model="fromData.vinNo" placeholder="请输入车架号">
							</u--input>
						</uni-forms-item>
						<uni-forms-item label="发动机号" name="engineNo">
							<u--input v-model="fromData.engineNo" placeholder="请输入发动机号">
							</u--input>
						</uni-forms-item>
						<uni-forms-item label="车辆颜色" name="carColorShow">
							<view @click="editCar(2)">
								<u--input v-model="fromData.carColorShow" placeholder="请选择车辆颜色" disabled
									disabledColor="#fff" suffixIcon="arrow-right"></u--input>
							</view>
						</uni-forms-item>
						<uni-forms-item label="归属门店" name="belongingStoreName" required>
							<view @click="editCar(3)">
								<u--input v-model="fromData.belongingStoreName" placeholder="请选择归属门店" disabled
									disabledColor="#fff" suffixIcon="arrow-right"></u--input>
							</view>
						</uni-forms-item>
						<uni-forms-item label="停靠门店" name="locatedStoreName" required>
							<view @click="editCar(4)">
								<u--input v-model="fromData.locatedStoreName" placeholder="请选择停靠门店" disabled
									disabledColor="#fff" suffixIcon="arrow-right"></u--input>
							</view>
						</uni-forms-item>

						<uni-forms-item label="车辆状态" name="carStatus" required>
							<uni-data-checkbox v-model="fromData.carStatus" :localdata="carStatus" />
						</uni-forms-item>

						<uni-forms-item label="随车物品" name="accessoryItemsName">
							<uni-data-checkbox :map='map' mode="tag" multiple :localdata="accessories"
								@change="checkAccessories"></uni-data-checkbox>
						</uni-forms-item>

					</uni-forms>
				</view>
			</uni-section>

		</view>

		<view class="sub-btn" @click="addCar">
			新增车辆
		</view>

		<!-- 车牌号键盘 -->
		<u-keyboard ref="uKeyboard" mode="car" :show="showCarKeyboard" @change="keyboardChange" @backspace="backspace"
			@cancel="showCarKeyboard=false" @confirm="showCarKeyboard=false"></u-keyboard>
		<!-- 行驶证日期 -->
		<u-datetime-picker v-model="currentDate" ref="datetimePicker" closeOnClickOverlay :show="showTimeAlert"
			@close="showTimeAlert=false" @cancel="showTimeAlert=false" :formatter="formatter" mode="date" title="行驶证有效期"
			confirmColor="#1573FF" @confirm="confimTime"></u-datetime-picker>
		<!-- 车辆归属门店 -->
		<u-picker :show="showStore1" :columns="storeList" keyName="name" closeOnClickOverlay @close="showStore1=false"
			@cancel="showStore1=false" title="归属门店" confirmColor="#1573FF" @confirm="confimStore1">
		</u-picker>
		<!-- 车辆停靠门店 -->
		<u-picker :show="showStore2" :columns="storeList" keyName="name" closeOnClickOverlay @close="showStore2=false"
			@cancel="showStore2=false" title="停靠门店" confirmColor="#1573FF" @confirm="confimStore2">
		</u-picker>
		<!-- 车辆颜色 -->
		<u-picker :show="showColor" :columns="colorList" keyName="name" closeOnClickOverlay @close="showColor=false"
			@cancel="showColor=false" title="车辆颜色" confirmColor="#1573FF" @confirm="confimColor">
		</u-picker>
		<!-- 车辆状态 -->
		<u-picker :show="showStatus" :columns="carStatus" keyName="label" closeOnClickOverlay @close="showStatus=false"
			@cancel="showStatus=false" title="车辆状态" confirmColor="#1573FF" @confirm="confimStatus">
		</u-picker>


	</view>
</template>

<script>
	import srUpload from '@/components/upload/sr-upload.vue'
	import {
		dictDataList,
		apiInsertCarBasic,
		postXsz
	} from '@/api/car-api.js'
	var moment = require('@/utils/moment.js');
	export default {
		components: {
			srUpload
		},
		data() {
			return {
				currentDate: moment(),
				showCarKeyboard: false,
				showTimeAlert: false,
				showStore1: false,
				showStore2: false,
				showColor: false,
				showStatus: false,
				accessories: [],
				colorList: [],
				carStatus: [{
						'text': '待整备',
						'value': 1
					},
					{
						'text': '备发车',
						'value': 2
					}

				],
				map: {
					text: 'name',
					value: 'id'
				},
				fromData: {
					carNo: '',
					carBrandId: '',
					carSeriesId: '',
					carModelId: '',
					carBrandName: '',
					carSeriesName: '',
					carModelName: '',
					vinNo: '',
					engineNo: '',
					locatedStoreId: '',
					belongingStoreId: '',
					belongingStoreName: '',
					locatedStoreName: '',
					carStatus: 1,
					carStatusShow: '',
					carColor: '',
					carColorShow: '',
					drivingLicenseImgFront: '',
					drivingLicenseImgBack: '',
					drivingLicenseValidityDate: '',
					accessoryItems: '',
					accessoryItemsName: '',
					carInfo: ''

				},
				rules: {
					carInfo: {
						rules: [{
							required: true,
							errorMessage: '请选择车型',
						}]
					},
					carNo: {
						rules: [{
							required: true,
							errorMessage: '请输入车牌号',
						}]
					},
					vinNo: {
						rules: [{
							required: true,
							errorMessage: '请输入车架号',
						}]
					},
					belongingStoreName: {
						rules: [{
							required: true,
							errorMessage: '请选择归属门店',
						}]
					},
					locatedStoreName: {
						rules: [{
							required: true,
							errorMessage: '请选择停靠门店',
						}]
					}

				}

			}
		},
		computed: {
			storeList() {
				var result = [this.$store.state.initData.initData.storeList];
				return result;
			}
		},
		onLoad() {
			uni.$on('chooseCarInfo', (car) => {
				console.log(car);
				this.fromData.carInfo = car.carInfo;
				this.fromData.carBrandId = car.brandId;
				this.fromData.carBrandName = car.brandName;
				this.fromData.carSeriesId = car.seriesId;
				this.fromData.carSeriesName = car.seriesName;
				this.fromData.carModelId = car.modelId;
				this.fromData.carModelName = car.modelName;
			})

			this.getConfigData();

		},
		methods: {
			//获取车辆颜色及随车物品
			getConfigData() {
				let type = 'car_accessories,car_color';
				dictDataList(type).then(res => {
					this.accessories = res.data.car_accessories;
					this.colorList = [res.data.car_color];
				})
			},
			//行驶证正面
			uploadResult1(urls) {
				if (urls.length > 0) {
					this.fromData.drivingLicenseImgFront = urls[0];
					this.getOCRInfo();
				}

			},
			//行驶证反面
			uploadResult2(urls) {
				this.fromData.drivingLicenseImgBack = urls[0];
			},
			//监听车牌号键盘改变
			keyboardChange(val) {
				this.fromData.carNo += val;
			},
			//车牌号删除
			backspace() {
				if (this.fromData.carNo) this.fromData.carNo = this.fromData.carNo.substr(0, this.fromData.carNo.length -
					1);
			},
			// 行驶证识别
			getOCRInfo() {
				var params = {
					url: this.fromData.drivingLicenseImgFront
				}
				postXsz(this.toParams(params)).then(res => {
					this.fromData.carNo = res.data.carPlateNo; //号牌号码
					this.fromData.engineNo = res.data.engineNo; //发动机号码
					this.fromData.vinNo = res.data.vinNo; //发动机号码
				})
			},

			//相关点击事件
			editCar(type) {
				switch (type) {
					case 1: //品牌车系车型
						uni.navigateTo({
							url: './car-model'
						})
						break;
					case 2: //车辆颜色
						this.showColor = true;
						break;
					case 3: //归属门店
						this.showStore1 = true;
						break;
					case 4: //停靠门店
						this.showStore2 = true;
						break;
					case 5: //车辆状态
						this.showStatus = true;
						break;
					default:
						break;
				}
			},
			// 行驶证有效期
			confimTime(e) {
				this.fromData.drivingLicenseValidityDate = moment(e.value).format('YYYY-MM-DD');
				this.showTimeAlert = false;
			},
			//车辆颜色
			confimColor(e) {
				this.fromData.carColor = e.value[0].id;
				this.fromData.carColorShow = e.value[0].name;
				this.showColor = false;
			},
			//归属门店
			confimStore1(e) {
				this.fromData.belongingStoreId = e.value[0].id;
				this.fromData.belongingStoreName = e.value[0].name;
				this.showStore1 = false;
			},
			//停靠门店
			confimStore2(e) {

				this.fromData.locatedStoreId = e.value[0].id;
				this.fromData.locatedStoreName = e.value[0].name;
				this.showStore2 = false;
			},

			//车辆状态
			confimStatus(e) {
				this.fromData.carStatus = e.value[0].value;
				this.fromData.carStatusShow = e.value[0].label;
				this.showStatus = false;
			},
			//随车物品选择
			checkAccessories(e) {
				var data = e.detail.data;
				var accessoryItem = [];
				var accessoryItemsName = [];
				data.forEach(item => {
					accessoryItem.push(item.id);
					accessoryItemsName.push(item.name);
				});
				this.fromData.accessoryItems = accessoryItem.join(',');
				this.fromData.accessoryItemsName = accessoryItemsName.join(',');
			},
			//新增车辆
			addCar() {
				console.log('进来了');
				let that = this;
				this.$refs.form.validate().then(res => {
					uni.showModal({
						title: '提示',
						content: '确认添加该车辆吗?',
						cancelText: '取消',
						confirmText: '确定',
						success: function(res1) {
							if (res1.confirm) {
								uni.showLoading({
									title: "提交中...",
									mask: true
								});
								apiInsertCarBasic(that.fromData).then(res2 => {
									uni.hideLoading();
									if (res2.code == 200) {
										uni.$u.toast('提交成功')
										uni.navigateBack({})
									}
								}).catch(errors => {
									uni.$u.toast(errors)
								})
							} else {
								console.log('取消');
							}

						}
					})
				})

			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

		}
	}
</script>

<style lang="scss" scoped>
	.cerBox {
		display: flex;

	}

	.formContainer {
		margin: 40rpx 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>
